<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 上面介绍的,是操作一个元素里面的东西
    接下来要说的操作节点是针对页面上的元素进行增删 -->
    <!-- 1.元素创建出来    ->有专门的api
            createElement(标签名)
        2.把元素加入到dom树上
        先确定要把新元素放到哪个父节点下~~
        根据父节点,使用appendChild方法 
        另外还有一个insertBefore也能实现插入,插入到某个子元素的前面
        3.删除节点,removeChild
        先确定要删除的父节点
        然后再确定要删除的节点-->
    <div class="container">
        <div>这是之前的div</div>
        <button>删除/恢复新的div</button>
        
    </div>
    <script>
        
        //创建一个新的div标签
        let div = document.createElement('div');
        div.innerHTML = '这是新创建的div'
        div.id = 'one';
        div.className = 'one-div';
        div.style.fontSize = '100px'

        console.log(div);

        //获取到container对象
        let container = document.querySelector('.container');
        container.appendChild(div);

        let button = document.querySelector('button');
        button.onclick = function(){
            if(container.hasChildNodes(div)){
                container.removeChild(div);
            }
            
        }
    </script>
</body>
</html>